<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发布大宗商品 - 工业集采平台</title>
  <!-- 外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#0F52BA',
            secondary: '#3B82F6',
            success: '#10B981',
            warning: '#F59E0B',
            danger: '#EF4444',
            neutral: {
              100: '#F3F4F6',
              200: '#E5E7EB',
              300: '#D1D5DB',
              400: '#9CA3AF',
              500: '#6B7280',
              600: '#4B5563',
              700: '#374151',
              800: '#1F2937',
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .form-input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
      }
      .form-label {
        @apply block text-sm font-medium text-neutral-700 mb-1;
      }
      .form-section {
        @apply mb-8 pb-6 border-b border-neutral-200 last:border-0 last:mb-0 last:pb-0;
      }
      .upload-area {
        @apply border-2 border-dashed border-neutral-300 rounded-lg p-6 text-center hover:border-primary transition-colors cursor-pointer bg-neutral-50;
      }
      .step-active {
        @apply bg-primary text-white;
      }
      .step-completed {
        @apply bg-success text-white;
      }
      .step-pending {
        @apply bg-neutral-200 text-neutral-500;
      }
      .form-error {
        @apply border-danger focus:ring-danger/50 focus:border-danger;
      }
      .error-message {
        @apply text-danger text-xs mt-1 hidden;
      }
      .step-circle {
        @apply w-10 h-10 rounded-full flex items-center justify-center mb-2 cursor-pointer transition-all duration-300 hover:scale-110;
      }
    }
  </style>
</head>

<body class="bg-gray-50 font-sans text-neutral-800">
  <!-- 主内容区 -->
  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 页面标题与进度 -->
    <div class="mb-8">
      <div class="flex flex-wrap justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">发布大宗商品</h1>
        <div class="text-sm text-neutral-500">
          <span>如需帮助，请联系 <a href="#" class="text-primary hover:underline">平台客服</a></span>
        </div>
      </div>
      
      <!-- 进度指示器 - 可点击切换步骤 -->
      <div class="bg-white rounded-lg p-4 mb-8">
        <div class="flex items-center justify-between">
          <div class="flex flex-col items-center w-1/4">
            <div class="step-circle step-active" id="step1-indicator" data-step="1">1</div>
            <span class="text-sm font-medium text-primary" id="step1-text">基本信息</span>
          </div>
          <div class="h-0.5 w-full bg-neutral-200" id="progress-bar-1"></div>
          <div class="flex flex-col items-center w-1/4">
            <div class="step-circle step-pending" id="step2-indicator" data-step="2">2</div>
            <span class="text-sm font-medium text-neutral-500" id="step2-text">规格参数</span>
          </div>
          <div class="h-0.5 w-full bg-neutral-200" id="progress-bar-2"></div>
          <div class="flex flex-col items-center w-1/4">
            <div class="step-circle step-pending" id="step3-indicator" data-step="3">3</div>
            <span class="text-sm font-medium text-neutral-500" id="step3-text">价格库存</span>
          </div>
          <div class="h-0.5 w-full bg-neutral-200" id="progress-bar-3"></div>
          <div class="flex flex-col items-center w-1/4">
            <div class="step-circle step-pending" id="step4-indicator" data-step="4">4</div>
            <span class="text-sm font-medium text-neutral-500" id="step4-text">完成提交</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 表单容器 -->
    <div class="bg-white rounded-xl shadow-sm p-6 lg:p-8 mb-6">
      <form id="productForm">
        <!-- 步骤1：基本信息部分 -->
        <section class="form-section" id="step1">
          <h2 class="text-lg font-bold mb-6 flex items-center">
            <i class="fa fa-info-circle text-primary mr-2"></i>基本信息
          </h2>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="productCategory" class="form-label">商品分类 <span class="text-danger">*</span></label>
              <select id="productCategory" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus">
                <option value="">请选择分类</option>
                <option value="steel">钢铁冶金</option>
                <option value="nonferrous">有色金属</option>
                <option value="chemical">能源化工</option>
                <option value="building">建筑材料</option>
                <option value="machinery">机械设备</option>
              </select>
              <p class="error-message" id="productCategoryError">请选择商品分类</p>
              <p class="mt-1 text-xs text-neutral-500">选择最匹配的分类有助于买家更易找到您的商品</p>
            </div>
            
            <div>
              <label for="productSubCategory" class="form-label">子分类 <span class="text-danger">*</span></label>
              <select id="productSubCategory" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus">
                <option value="">请先选择主分类</option>
              </select>
              <p class="error-message" id="productSubCategoryError">请选择子分类</p>
            </div>
            
            <div class="md:col-span-2">
              <label for="productName" class="form-label">商品名称 <span class="text-danger">*</span></label>
              <input type="text" id="productName" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus" placeholder="例如：HRB400E 螺纹钢 12mm-32mm 抗震钢筋">
              <p class="error-message" id="productNameError">请输入商品名称</p>
              <p class="mt-1 text-xs text-neutral-500">请包含关键参数（材质、规格等），不超过80个字符</p>
            </div>
            
            <div class="md:col-span-2">
              <label for="productKeywords" class="form-label">关键词</label>
              <input type="text" id="productKeywords" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus" placeholder="请输入关键词，多个关键词用逗号分隔">
              <p class="mt-1 text-xs text-neutral-500">最多可输入10个关键词，有助于搜索排名</p>
            </div>
            
            <div class="md:col-span-2">
              <label class="form-label">商品主图 <span class="text-danger">*</span></label>
              <div class="upload-area mb-4" id="mainImageUpload">
                <input type="file" class="hidden" accept="image/*" id="mainImageInput">
                <i class="fa fa-cloud-upload text-3xl text-neutral-400 mb-2"></i>
                <p class="text-sm text-neutral-500">点击或拖拽文件至此处上传</p>
                <p class="text-xs text-neutral-400 mt-1">支持JPG、PNG格式，建议尺寸800×800像素，文件大小不超过5MB</p>
              </div>
              <p class="error-message" id="mainImageError">请上传商品主图</p>
              <div id="mainImagePreview" class="hidden">
                <img src="" alt="预览图" class="max-h-40 rounded-md border border-neutral-200">
                <button type="button" class="mt-2 text-sm text-danger hover:text-danger/80 transition-colors" id="removeMainImage">
                  <i class="fa fa-trash-o mr-1"></i>移除图片
                </button>
              </div>
            </div>
            
            <div class="md:col-span-2">
              <label class="form-label">商品附图</label>
              <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                <div class="upload-area" id="imageUpload1">
                  <input type="file" class="hidden" accept="image/*" id="imageInput1">
                  <i class="fa fa-cloud-upload text-2xl text-neutral-400 mb-1"></i>
                  <p class="text-xs text-neutral-500">点击上传</p>
                </div>
                <div class="upload-area" id="imageUpload2">
                  <input type="file" class="hidden" accept="image/*" id="imageInput2">
                  <i class="fa fa-cloud-upload text-2xl text-neutral-400 mb-1"></i>
                  <p class="text-xs text-neutral-500">点击上传</p>
                </div>
                <div class="upload-area" id="imageUpload3">
                  <input type="file" class="hidden" accept="image/*" id="imageInput3">
                  <i class="fa fa-cloud-upload text-2xl text-neutral-400 mb-1"></i>
                  <p class="text-xs text-neutral-500">点击上传</p>
                </div>
                <div class="upload-area" id="imageUpload4">
                  <input type="file" class="hidden" accept="image/*" id="imageInput4">
                  <i class="fa fa-cloud-upload text-2xl text-neutral-400 mb-1"></i>
                  <p class="text-xs text-neutral-500">点击上传</p>
                </div>
              </div>
              <p class="mt-2 text-xs text-neutral-500">最多上传4张附图，展示商品细节、应用场景等</p>
            </div>
            
            <div class="md:col-span-2">
              <label for="productDescription" class="form-label">商品详情描述 <span class="text-danger">*</span></label>
              <div class="border border-neutral-300 rounded-md overflow-hidden">
                <!-- 编辑器工具栏 -->
                <div class="bg-neutral-50 border-b border-neutral-300 p-2 flex flex-wrap gap-1">
                  <button type="button" class="p-1.5 text-neutral-600 hover:bg-neutral-200 rounded text-xs" title="加粗" onclick="formatText('bold')">
                    <i class="fa fa-bold"></i>
                  </button>
                  <button type="button" class="p-1.5 text-neutral-600 hover:bg-neutral-200 rounded text-xs" title="斜体" onclick="formatText('italic')">
                    <i class="fa fa-italic"></i>
                  </button>
                  <button type="button" class="p-1.5 text-neutral-600 hover:bg-neutral-200 rounded text-xs" title="下划线" onclick="formatText('underline')">
                    <i class="fa fa-underline"></i>
                  </button>
                  <span class="h-5 w-px bg-neutral-300 mx-0.5"></span>
                  <button type="button" class="p-1.5 text-neutral-600 hover:bg-neutral-200 rounded text-xs" title="无序列表" onclick="formatText('insertUnorderedList')">
                    <i class="fa fa-list-ul"></i>
                  </button>
                  <button type="button" class="p-1.5 text-neutral-600 hover:bg-neutral-200 rounded text-xs" title="有序列表" onclick="formatText('insertOrderedList')">
                    <i class="fa fa-list-ol"></i>
                  </button>
                  <span class="h-5 w-px bg-neutral-300 mx-0.5"></span>
                  <button type="button" class="p-1.5 text-neutral-600 hover:bg-neutral-200 rounded text-xs" title="插入图片">
                    <i class="fa fa-image"></i>
                  </button>
                  <button type="button" class="p-1.5 text-neutral-600 hover:bg-neutral-200 rounded text-xs" title="插入表格">
                    <i class="fa fa-table"></i>
                  </button>
                  <button type="button" class="p-1.5 text-neutral-600 hover:bg-neutral-200 rounded text-xs" title="插入链接" onclick="insertLink()">
                    <i class="fa fa-link"></i>
                  </button>
                  <span class="h-5 w-px bg-neutral-300 mx-0.5"></span>
                  <button type="button" class="p-1.5 text-neutral-600 hover:bg-neutral-200 rounded text-xs" title="清除格式" onclick="formatText('removeFormat')">
                    <i class="fa fa-eraser"></i>
                  </button>
                </div>
                <!-- 编辑器内容区 -->
                <div id="productDescription" class="w-full p-3 text-sm min-h-[200px]" contenteditable="true" placeholder="请详细描述商品特点、参数、用途、优势等信息..."></div>
              </div>
              <p class="error-message" id="productDescriptionError">商品详情描述字数不少于200字</p>
              <div class="flex justify-between mt-1">
                <p class="text-xs text-neutral-500">建议详细描述商品信息，字数不少于200字</p>
                <p class="text-xs text-neutral-500"><span id="descCharCount">0</span>/2000</p>
              </div>
            </div>
            
            <div>
              <label for="productBrand" class="form-label">品牌</label>
              <input type="text" id="productBrand" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus" placeholder="如：鞍钢、首钢等">
            </div>
            
            <div>
              <label for="productOrigin" class="form-label">原产地 <span class="text-danger">*</span></label>
              <input type="text" id="productOrigin" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus" placeholder="如：辽宁鞍山、上海等">
              <p class="error-message" id="productOriginError">请输入原产地</p>
            </div>
          </div>
        </section>
        
        <!-- 步骤2：规格参数部分 -->
        <section class="form-section hidden" id="step2">
          <h2 class="text-lg font-bold mb-6 flex items-center">
            <i class="fa fa-cubes text-primary mr-2"></i>规格参数
          </h2>
          
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <label class="form-label">规格参数模板</label>
              <button type="button" class="text-sm text-primary hover:text-primary/80 transition-colors" id="addCustomParam">
                <i class="fa fa-plus-circle mr-1"></i>自定义参数
              </button>
            </div>
            
            <div id="categoryParamsContainer" class="overflow-hidden transition-all duration-300">
              <!-- 动态参数表格将在这里显示 -->
              <table class="min-w-full divide-y divide-neutral-200 mb-4" id="parametersTable">
                <thead>
                  <tr>
                    <th class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider w-1/3">参数名称</th>
                    <th class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider w-2/3">参数值 <span class="text-danger">*</span></th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-neutral-200" id="paramsTableBody">
                  <!-- 参数行会动态生成 -->
                </tbody>
              </table>
              <p class="error-message" id="paramsError">请填写所有必填参数</p>
            </div>
          </div>
          
          <div>
            <label class="form-label mb-4 block">多规格设置</label>
            <div class="border border-neutral-300 rounded-md overflow-hidden">
              <div class="bg-neutral-50 px-4 py-3 border-b border-neutral-300 flex justify-between items-center">
                <span class="text-sm font-medium">规格组合</span>
                <button type="button" class="text-sm text-primary hover:text-primary/80 transition-colors" id="addSpecification">
                  <i class="fa fa-plus mr-1"></i>添加规格
                </button>
              </div>
              <div id="specificationsContainer" class="p-4">
                <table class="min-w-full divide-y divide-neutral-200">
                  <thead>
                    <tr>
                      <th class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">规格名称</th>
                      <th class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">规格值</th>
                      <th class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider w-16">操作</th>
                    </tr>
                  </thead>
                  <tbody id="specsTableBody" class="bg-white divide-y divide-neutral-200">
                    <tr class="spec-row">
                      <td class="px-4 py-3">
                        <input type="text" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus spec-name" placeholder="如：直径">
                      </td>
                      <td class="px-4 py-3">
                        <input type="text" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus spec-value" placeholder="如：12mm,16mm（用逗号分隔）">
                      </td>
                      <td class="px-4 py-3">
                        <button type="button" class="text-danger hover:text-danger/80 transition-colors text-sm delete-spec" disabled>
                          <i class="fa fa-trash-o"></i>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 步骤3：价格库存部分 -->
        <section class="form-section hidden" id="step3">
          <h2 class="text-lg font-bold mb-6 flex items-center">
            <i class="fa fa-money text-primary mr-2"></i>价格库存
          </h2>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="basePrice" class="form-label">基准价格（元） <span class="text-danger">*</span></label>
              <div class="relative">
                <input type="number" id="basePrice" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus" placeholder="请输入基准单价" step="0.01" min="0">
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <span class="text-neutral-500 text-sm">/单位</span>
                </div>
              </div>
              <p class="error-message" id="basePriceError">请输入基准价格</p>
            </div>
            
            <div>
              <label for="priceUnit" class="form-label">计价单位 <span class="text-danger">*</span></label>
              <select id="priceUnit" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus">
                <option value="">请选择计价单位</option>
                <option value="ton">吨</option>
                <option value="kg">千克</option>
                <option value="piece">件</option>
                <option value="set">套</option>
                <option value="meter">米</option>
                <option value="square">平方米</option>
                <option value="custom">自定义</option>
              </select>
              <p class="error-message" id="priceUnitError">请选择计价单位</p>
              <div id="customUnitContainer" class="hidden mt-3">
                <input type="text" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus" placeholder="请输入自定义单位">
              </div>
            </div>
            
            <div>
              <label for="minOrder" class="form-label">最小起订量 <span class="text-danger">*</span></label>
              <input type="number" id="minOrder" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus" placeholder="请输入最小起订量" min="1">
              <p class="error-message" id="minOrderError">请输入最小起订量</p>
            </div>
            
            <div>
              <label for="stockQuantity" class="form-label">库存数量</label>
              <input type="number" id="stockQuantity" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus" placeholder="请输入库存数量，0表示无限制" min="0">
            </div>
          </div>
          
          <div class="mt-6">
            <div class="flex items-center justify-between mb-4">
              <label class="form-label">阶梯价格设置</label>
              <button type="button" class="text-sm text-primary hover:text-primary/80 transition-colors" id="addPriceTier">
                <i class="fa fa-plus-circle mr-1"></i>添加阶梯
              </button>
            </div>
            
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-neutral-200">
                <thead>
                  <tr>
                    <th class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">订购数量范围</th>
                    <th class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">单价（元） <span class="text-danger">*</span></th>
                    <th class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider w-16">操作</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-neutral-200" id="priceTiersContainer">
                  <tr class="price-tier-row">
                    <td class="px-4 py-3">
                      <div class="flex items-center space-x-2">
                        <input type="number" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus tier-start" placeholder="起始数量" min="1">
                        <span class="text-neutral-500">-</span>
                        <input type="number" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus tier-end" placeholder="结束数量" min="1">
                        <span class="text-neutral-500 ml-1">单位</span>
                      </div>
                      <p class="error-message tier-range-error hidden">请输入有效的数量范围</p>
                    </td>
                    <td class="px-4 py-3">
                      <input type="number" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus tier-price" placeholder="单价" step="0.01" min="0">
                      <p class="error-message tier-price-error hidden">请输入单价</p>
                    </td>
                    <td class="px-4 py-3">
                      <button type="button" class="text-danger hover:text-danger/80 transition-colors text-sm delete-tier" disabled>
                        <i class="fa fa-trash-o"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p class="mt-1 text-xs text-neutral-500">设置不同采购量对应的价格，鼓励批量采购</p>
          </div>
          
          <div class="mt-6">
            <label class="form-label mb-4 block">交货与物流</label>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="deliveryTime" class="form-label">交货周期 <span class="text-danger">*</span></label>
                <input type="text" id="deliveryTime" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus" placeholder="如：付款后7天内发货">
                <p class="error-message" id="deliveryTimeError">请填写交货周期</p>
              </div>
              
              <div>
                <label for="packaging" class="form-label">包装方式 <span class="text-danger">*</span></label>
                <input type="text" id="packaging" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus" placeholder="如：捆扎包装、木箱包装等">
                <p class="error-message" id="packagingError">请填写包装方式</p>
              </div>
              
              <div>
                <label for="transportMethod" class="form-label">运输方式 <span class="text-danger">*</span></label>
                <select id="transportMethod" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus">
                  <option value="">请选择运输方式</option>
                  <option value="road">公路运输</option>
                  <option value="rail">铁路运输</option>
                  <option value="sea">水路运输</option>
                  <option value="air">航空运输</option>
                  <option value="multi">多式联运</option>
                  <option value="self">买方自提</option>
                </select>
                <p class="error-message" id="transportMethodError">请选择运输方式</p>
              </div>
              
              <div>
                <label for="freightType" class="form-label">运费承担 <span class="text-danger">*</span></label>
                <select id="freightType" class="w-full rounded-md border border-neutral-300 py-2 px-3 text-sm form-input-focus">
                  <option value="seller">卖方承担</option>
                  <option value="buyer">买方承担</option>
                  <option value="negotiate">协商确定</option>
                </select>
                <p class="error-message" id="freightTypeError">请选择运费承担方式</p>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 步骤4：完成提交 -->
        <section class="form-section hidden" id="step4">
          <h2 class="text-lg font-bold mb-6 flex items-center">
            <i class="fa fa-check-circle text-primary mr-2"></i>确认并提交
          </h2>
          
          <div class="bg-neutral-50 p-4 rounded-lg mb-6">
            <h3 class="font-medium mb-3">请确认以下信息无误</h3>
            <p class="text-sm text-neutral-600">提交后，平台将在24小时内审核您的商品信息，请耐心等待。</p>
          </div>
          
          <!-- 信息预览 -->
          <div class="space-y-6">
            <div>
              <h3 class="text-base font-medium mb-3 pb-2 border-b border-neutral-200">基本信息预览</h3>
              <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4 text-sm">
                <div>
                  <dt class="text-neutral-500">商品分类</dt>
                  <dd class="font-medium" id="preview-category">-</dd>
                </div>
                <div>
                  <dt class="text-neutral-500">商品名称</dt>
                  <dd class="font-medium" id="preview-name">-</dd>
                </div>
                <div>
                  <dt class="text-neutral-500">品牌</dt>
                  <dd class="font-medium" id="preview-brand">-</dd>
                </div>
                <div>
                  <dt class="text-neutral-500">原产地</dt>
                  <dd class="font-medium" id="preview-origin">-</dd>
                </div>
                <div class="md:col-span-2">
                  <dt class="text-neutral-500 mb-1">关键词</dt>
                  <dd class="font-medium" id="preview-keywords">-</dd>
                </div>
              </dl>
            </div>
            
            <div>
              <h3 class="text-base font-medium mb-3 pb-2 border-b border-neutral-200">规格参数预览</h3>
              <div id="preview-params" class="text-sm space-y-2">
                <!-- 将动态填充 -->
                <p class="text-neutral-500 italic">请完成规格参数设置</p>
              </div>
            </div>
            
            <div>
              <h3 class="text-base font-medium mb-3 pb-2 border-b border-neutral-200">价格与物流信息</h3>
              <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4 text-sm">
                <div>
                  <dt class="text-neutral-500">基准价格</dt>
                  <dd class="font-medium" id="preview-price">-</dd>
                </div>
                <div>
                  <dt class="text-neutral-500">最小起订量</dt>
                  <dd class="font-medium" id="preview-minorder">-</dd>
                </div>
                <div>
                  <dt class="text-neutral-500">交货周期</dt>
                  <dd class="font-medium" id="preview-delivery">-</dd>
                </div>
                <div>
                  <dt class="text-neutral-500">运输方式</dt>
                  <dd class="font-medium" id="preview-transport">-</dd>
                </div>
                <div>
                  <dt class="text-neutral-500">运费承担</dt>
                  <dd class="font-medium" id="preview-freight">-</dd>
                </div>
              </dl>
            </div>
          </div>
          
          <div class="mt-8 p-4 bg-warning/10 border border-warning/20 rounded-lg">
            <div class="flex">
              <div class="flex-shrink-0">
                <i class="fa fa-exclamation-triangle text-warning"></i>
              </div>
              <div class="ml-3">
                <h3 class="text-sm font-medium text-warning">发布须知</h3>
                <div class="mt-2 text-sm text-neutral-600">
                  <p>1. 请确保所发布的商品信息真实有效，不得发布虚假信息或侵权内容</p>
                  <p>2. 平台将对商品信息进行审核，审核不通过将通过短信通知您</p>
                  <p>3. 商品信息发布后，您可以在"商品管理"中进行编辑和下架操作</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="mt-6">
            <label class="flex items-center">
              <input type="checkbox" id="agreeTerms" class="h-4 w-4 text-primary focus:ring-primary border-neutral-300 rounded">
              <span class="ml-2 block text-sm text-neutral-700">我已阅读并同意<a href="#" class="text-primary hover:underline">《商品发布规则》</a>和<a href="#" class="text-primary hover:underline">《平台服务协议》</a></span>
            </label>
            <p class="error-message" id="agreeTermsError">请阅读并同意相关条款</p>
          </div>
        </section>
        
        <!-- 操作按钮 -->
        <div class="flex justify-between pt-6 border-t border-neutral-200" id="stepButtons">
          <button type="button" class="px-6 py-2 border border-neutral-300 rounded-md text-neutral-700 hover:bg-neutral-50 transition-colors text-sm font-medium" id="saveDraftBtn">
            保存草稿
          </button>
          <div>
            <button type="button" class="px-6 py-2 border border-neutral-300 rounded-md text-neutral-700 hover:bg-neutral-50 transition-colors text-sm font-medium mr-3 hidden" id="prevStepBtn">
              <i class="fa fa-arrow-left mr-1"></i> 上一步
            </button>
            <button type="button" class="px-8 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-sm font-medium" id="nextStepBtn">
              下一步 <i class="fa fa-arrow-right ml-1"></i>
            </button>
            <button type="button" class="px-8 py-2 bg-success text-white rounded-md hover:bg-success/90 transition-colors text-sm font-medium hidden" id="submitBtn">
              确认提交 <i class="fa fa-check ml-1"></i>
            </button>
          </div>
        </div>
      </form>
    </div>
    
    <!-- 帮助提示 -->
    <div class="bg-white rounded-xl shadow-sm p-6">
      <h3 class="text-base font-bold mb-4 flex items-center">
        <i class="fa fa-lightbulb-o text-warning mr-2"></i>发布商品小贴士
      </h3>
      <ul class="space-y-2 text-sm text-neutral-600">
        <li class="flex items-start">
          <i class="fa fa-check-circle text-success mt-0.5 mr-2"></i>
          <span>商品名称包含关键参数（如材质、规格、型号）有助于提高搜索排名</span>
        </li>
        <li class="flex items-start">
          <i class="fa fa-check-circle text-success mt-0.5 mr-2"></i>
          <span>上传清晰、高质量的商品图片能有效提高买家关注度</span>
        </li>
        <li class="flex items-start">
          <i class="fa fa-check-circle text-success mt-0.5 mr-2"></i>
          <span>详细填写产品参数和性能指标，有助于专业买家快速了解产品</span>
        </li>
        <li class="flex items-start">
          <i class="fa fa-check-circle text-success mt-0.5 mr-2"></i>
          <span>设置合理的阶梯价格，鼓励买家批量采购</span>
        </li>
        <li class="flex items-start">
          <i class="fa fa-check-circle text-success mt-0.5 mr-2"></i>
          <span>准确填写交货周期和运输信息，避免后续交易纠纷</span>
        </li>
      </ul>
    </div>
  </main>
  
  <!-- 成功提交弹窗 -->
  <div id="successModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
    <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4 transform transition-all">
      <div class="text-center">
        <div class="w-16 h-16 bg-success/20 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-check text-2xl text-success"></i>
        </div>
        <h3 class="text-lg font-bold mb-2">提交成功</h3>
        <p class="text-neutral-600 mb-6">您的商品信息已提交，平台将在24小时内完成审核</p>
        <div class="flex justify-center space-x-3">
          <button type="button" class="px-6 py-2 border border-neutral-300 rounded-md text-neutral-700 hover:bg-neutral-50 transition-colors text-sm font-medium" id="gotoListBtn">
            查看商品列表
          </button>
          <button type="button" class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-sm font-medium" id="addAnotherBtn">
            发布新商品
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 页脚 -->
  <footer class="bg-white py-12 border-t border-gray-200">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
        <div>
          <h3 class="font-bold text-dark mb-4">关于我们</h3>
          <ul class="space-y-2 text-sm text-gray-500">
            <li><a href="#" class="hover:text-primary transition-colors">平台介绍</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">发展历程</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">团队成员</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">合作伙伴</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">联系我们</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-bold text-dark mb-4">采购指南</h3>
          <ul class="space-y-2 text-sm text-gray-500">
            <li><a href="#" class="hover:text-primary transition-colors">如何采购</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">支付方式</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">配送说明</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">售后服务</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">常见问题</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-bold text-dark mb-4">供应商服务</h3>
          <ul class="space-y-2 text-sm text-gray-500">
            <li><a href="#" class="hover:text-primary transition-colors">入驻流程</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">商家后台</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">营销服务</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">培训中心</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">规则中心</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-bold text-dark mb-4">联系我们</h3>
          <ul class="space-y-3 text-sm text-gray-500">
            <li class="flex items-start">
              <i class="fa fa-phone text-primary mt-1 mr-3"></i>
              <span>服务热线：400-123-4567<br>工作时间：9:00-18:00（周一至周五）</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-envelope-o text-primary mt-1 mr-3"></i>
              <span>邮箱：service@gongpinhui.com</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
              <span>地址：北京市朝阳区建国路88号</span>
            </li>
          </ul>
          <div class="mt-4 flex space-x-4">
            <a href="#" class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#" class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
              <i class="fa fa-linkedin"></i>
            </a>
          </div>
        </div>
      </div>
      
      <div class="pt-8 border-t border-gray-200 text-center text-sm text-gray-400">
        <p>© 2024 工品汇 B2B工业原材料采购平台 版权所有</p>
        <p class="mt-2">
          <a href="#" class="hover:text-primary transition-colors">营业执照</a> | 
          <a href="#" class="hover:text-primary transition-colors">ISO9001认证</a> | 
          <a href="#" class="hover:text-primary transition-colors">支付安全认证</a> | 
          <a href="#" class="hover:text-primary transition-colors">隐私政策</a>
        </p>
      </div>
    </div>
  </footer>
  
  <!-- JavaScript -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 当前步骤
      let currentStep = 1;
      const totalSteps = 4;
      
      // 存储表单数据
      const formData = {};
      
      // 分类数据及对应参数
      const categoryData = {
        'steel': {
          name: '钢铁冶金',
          subcategories: ['螺纹钢', '线材', '板材', '管材', '型钢', '钢板'],
          parameters: [
            {name: '材质', required: true},
            {name: '规格', required: true},
            {name: '执行标准', required: true},
            {name: '生产工艺', required: true},
            {name: '屈服强度', required: true},
            {name: '长度', required: false},
            {name: '表面处理', required: false}
          ]
        },
        'nonferrous': {
          name: '有色金属',
          subcategories: ['铜材', '铝材', '锌材', '铅材', '镍材', '钛材'],
          parameters: [
            {name: '材质', required: true},
            {name: '纯度', required: true},
            {name: '状态', required: true},
            {name: '规格', required: true},
            {name: '硬度', required: false},
            {name: '表面处理', required: false}
          ]
        },
        'chemical': {
          name: '能源化工',
          subcategories: ['煤炭', '焦炭', '铁矿石', '原油', '塑料', '橡胶'],
          parameters: [
            {name: '品名', required: true},
            {name: '型号', required: true},
            {name: '纯度', required: true},
            {name: '包装', required: true},
            {name: '产地', required: false},
            {name: '保质期', required: false}
          ]
        },
        'building': {
          name: '建筑材料',
          subcategories: ['水泥', '玻璃', '瓷砖', '涂料', '防水材料', '保温材料'],
          parameters: [
            {name: '品名', required: true},
            {name: '型号', required: true},
            {name: '规格', required: true},
            {name: '执行标准', required: true},
            {name: '颜色', required: false},
            {name: '保质期', required: false}
          ]
        },
        'machinery': {
          name: '机械设备',
          subcategories: ['工程机械', '冶金设备', '矿山设备', '起重设备', '输送设备'],
          parameters: [
            {name: '设备名称', required: true},
            {name: '型号规格', required: true},
            {name: '品牌', required: true},
            {name: '功率', required: true},
            {name: '重量', required: false},
            {name: '适用范围', required: false}
          ]
        }
      };
      
      // 初始化步骤导航 - 支持点击步骤圆圈切换
      initStepNavigation();
      
      // 初始化富文本编辑器
      initRichTextEditor();
      
      // 初始化分类选择联动
      initCategorySelection();
      
      // 初始化图片上传功能
      initImageUploads();
      
      // 初始化规格参数功能
      initSpecificationFeatures();
      
      // 初始化价格阶梯功能
      initPriceTierFeatures();
      
      // 初始化单位选择功能
      initUnitSelection();
      
      // 初始化提交功能
      initSubmissionFeatures();
      
      // 步骤导航初始化 - 支持点击步骤圆圈切换
      function initStepNavigation() {
        const nextBtn = document.getElementById('nextStepBtn');
        const prevBtn = document.getElementById('prevStepBtn');
        const submitBtn = document.getElementById('submitBtn');
        const stepIndicators = document.querySelectorAll('.step-circle');
        
        // 点击步骤圆圈切换步骤
        stepIndicators.forEach(indicator => {
          indicator.addEventListener('click', function() {
            const targetStep = parseInt(this.getAttribute('data-step'));
            
            // 只能切换到已完成或当前步骤，不能跳过未完成的步骤
            if (targetStep <= currentStep || isStepCompleted(targetStep)) {
              // 保存当前步骤数据
              saveCurrentStepData();
              
              // 切换到目标步骤
              currentStep = targetStep;
              updateStepUI();
              restoreCurrentStepData();
              
              // 如果到了最后一步，更新预览信息
              if (currentStep === totalSteps) {
                updatePreviewData();
              }
            }
          });
        });
        
        // 下一步按钮
        nextBtn.addEventListener('click', function() {
          if (validateCurrentStep()) {
            saveCurrentStepData();
            
            if (currentStep < totalSteps) {
              currentStep++;
              updateStepUI();
              restoreCurrentStepData();
              
              // 如果到了最后一步，更新预览信息
              if (currentStep === totalSteps) {
                updatePreviewData();
              }
            }
          }
        });
        
        // 上一步按钮
        prevBtn.addEventListener('click', function() {
          if (currentStep > 1) {
            saveCurrentStepData();
            currentStep--;
            updateStepUI();
            restoreCurrentStepData();
          }
        });
        
        // 提交按钮
        submitBtn.addEventListener('click', function() {
          if (validateAgreement()) {
            document.getElementById('successModal').classList.remove('hidden');
          }
        });
        
        // 关闭成功弹窗
        document.getElementById('gotoListBtn').addEventListener('click', function() {
          document.getElementById('successModal').classList.add('hidden');
          // 实际应用中会跳转到商品列表页
        });
        
        document.getElementById('addAnotherBtn').addEventListener('click', function() {
          document.getElementById('successModal').classList.add('hidden');
          // 重置表单
          resetForm();
        });
        
        // 保存草稿按钮
        document.getElementById('saveDraftBtn').addEventListener('click', function() {
          saveCurrentStepData();
          alert('草稿已保存');
        });
      }
      
      // 检查步骤是否已完成
      function isStepCompleted(step) {
        // 检查步骤是否有保存的数据，简单判断是否已完成
        if (step === 1) {
          return !!formData.productName;
        } else if (step === 2) {
          return !!formData.parameters && formData.parameters.length > 0;
        } else if (step === 3) {
          return !!formData.basePrice;
        }
        return false;
      }
      
      // 更新步骤UI
      function updateStepUI() {
        // 隐藏所有步骤
        for (let i = 1; i <= totalSteps; i++) {
          document.getElementById(`step${i}`).classList.add('hidden');
        }
        
        // 显示当前步骤
        document.getElementById(`step${currentStep}`).classList.remove('hidden');
        
        // 更新进度指示器
        for (let i = 1; i <= totalSteps; i++) {
          const indicator = document.getElementById(`step${i}-indicator`);
          const text = document.getElementById(`step${i}-text`);
          
          indicator.className = 'step-circle';
          text.className = 'text-sm font-medium';
          
          if (i < currentStep) {
            indicator.classList.add('step-completed');
            text.classList.add('text-success');
          } else if (i === currentStep) {
            indicator.classList.add('step-active');
            text.classList.add('text-primary');
          } else {
            // 对于未来的步骤，如果已完成也显示为已完成状态
            if (isStepCompleted(i)) {
              indicator.classList.add('step-completed');
              text.classList.add('text-success');
            } else {
              indicator.classList.add('step-pending');
              text.classList.add('text-neutral-500');
            }
          }
        }
        
        // 更新进度条
        for (let i = 1; i < totalSteps; i++) {
          const bar = document.getElementById(`progress-bar-${i}`);
          bar.className = 'h-0.5 w-full';
          
          if (i < currentStep || (i === currentStep - 1 && isStepCompleted(i + 1))) {
            bar.classList.add('bg-success');
          } else {
            bar.classList.add('bg-neutral-200');
          }
        }
        
        // 更新按钮状态
        const prevBtn = document.getElementById('prevStepBtn');
        const nextBtn = document.getElementById('nextStepBtn');
        const submitBtn = document.getElementById('submitBtn');
        
        if (currentStep > 1) {
          prevBtn.classList.remove('hidden');
        } else {
          prevBtn.classList.add('hidden');
        }
        
        if (currentStep === totalSteps) {
          nextBtn.classList.add('hidden');
          submitBtn.classList.remove('hidden');
        } else {
          nextBtn.classList.remove('hidden');
          submitBtn.classList.add('hidden');
        }
        
        // 滚动到顶部
        window.scrollTo({top: 0, behavior: 'smooth'});
      }
      
      // 验证当前步骤
      function validateCurrentStep() {
        let isValid = true;
        return isValid;
      }
      
      // 验证步骤1
      function validateStep1() {
        let isValid = true;
        return isValid;
      }
      
      // 验证步骤3
      function validateStep3() {
        var isValid = true;
        return isValid;
      }
      
      // 验证协议同意
      function validateAgreement() {
        const agreeTerms = document.getElementById('agreeTerms').checked;
        
        if (!agreeTerms) {
          document.getElementById('agreeTermsError').classList.remove('hidden');
          return false;
        }
        
        return true;
      }
      
      // 显示错误信息
      function showError(fieldId, errorId, message) {
        const field = document.getElementById(fieldId);
        const error = document.getElementById(errorId);
        
        field.classList.add('form-error');
        error.textContent = message;
        error.classList.remove('hidden');
      }
      
      // 保存当前步骤数据
      function saveCurrentStepData() {
        switch(currentStep) {
          case 1:
            saveStep1Data();
            break;
          case 2:
            saveStep2Data();
            break;
          case 3:
            saveStep3Data();
            break;
        }
      }
      
      // 保存步骤1数据
      function saveStep1Data() {
        formData.category = {
          id: document.getElementById('productCategory').value,
          name: categoryData[document.getElementById('productCategory').value]?.name || ''
        };
        
        const subCatSelect = document.getElementById('productSubCategory');
        formData.subCategory = {
          id: subCatSelect.value,
          name: subCatSelect.options[subCatSelect.selectedIndex]?.text || ''
        };
        
        formData.productName = document.getElementById('productName').value.trim();
        formData.keywords = document.getElementById('productKeywords').value.trim();
        formData.brand = document.getElementById('productBrand').value.trim();
        formData.origin = document.getElementById('productOrigin').value.trim();
        formData.description = document.getElementById('productDescription').innerHTML;
        
        // 图片数据在实际应用中会通过表单提交或AJAX上传
      }
      
      // 保存步骤2数据
      function saveStep2Data() {
        formData.parameters = [];
        const params = document.querySelectorAll('#paramsTableBody tr');
        
        params.forEach(row => {
          const name = row.querySelector('.param-name').textContent.replace('*', '').trim();
          const value = row.querySelector('.param-value').value.trim();
          const required = row.querySelector('.param-value').hasAttribute('data-required');
          
          formData.parameters.push({name, value, required});
        });
        
        formData.specifications = [];
        const specs = document.querySelectorAll('#specsTableBody tr:not(.hidden)');
        
        specs.forEach(row => {
          const name = row.querySelector('.spec-name').value.trim();
          const value = row.querySelector('.spec-value').value.trim();
          
          if (name) {
            formData.specifications.push({name, value});
          }
        });
      }
      
      // 保存步骤3数据
      function saveStep3Data() {
        formData.basePrice = document.getElementById('basePrice').value;
        formData.priceUnit = document.getElementById('priceUnit').value;
        
        if (formData.priceUnit === 'custom') {
          formData.customUnit = document.getElementById('customUnitContainer').querySelector('input').value.trim();
        }
        
        formData.minOrder = document.getElementById('minOrder').value;
        formData.stockQuantity = document.getElementById('stockQuantity').value || '0';
        
        formData.priceTiers = [];
        const tiers = document.querySelectorAll('.price-tier-row');
        
        tiers.forEach(row => {
          const start = row.querySelector('.tier-start').value;
          const end = row.querySelector('.tier-end').value;
          const price = row.querySelector('.tier-price').value;
          
          formData.priceTiers.push({start, end, price});
        });
        
        formData.deliveryTime = document.getElementById('deliveryTime').value.trim();
        formData.packaging = document.getElementById('packaging').value.trim();
        formData.transportMethod = document.getElementById('transportMethod').value;
        
        const transportText = document.getElementById('transportMethod').options[
          document.getElementById('transportMethod').selectedIndex
        ]?.text || '';
        formData.transportMethodText = transportText;
        
        formData.freightType = document.getElementById('freightType').value;
        
        const freightText = document.getElementById('freightType').options[
          document.getElementById('freightType').selectedIndex
        ]?.text || '';
        formData.freightTypeText = freightText;
      }
      
      // 恢复当前步骤数据
      function restoreCurrentStepData() {
        switch(currentStep) {
          case 1:
            restoreStep1Data();
            break;
          case 2:
            restoreStep2Data();
            break;
          case 3:
            restoreStep3Data();
            break;
        }
      }
      
      // 恢复步骤1数据
      function restoreStep1Data() {
        if (formData.category?.id) {
          document.getElementById('productCategory').value = formData.category.id;
          // 触发分类选择事件，加载子分类
          const event = new Event('change');
          document.getElementById('productCategory').dispatchEvent(event);
          
          // 选择子分类
          setTimeout(() => {
            if (formData.subCategory?.id) {
              document.getElementById('productSubCategory').value = formData.subCategory.id;
            }
          }, 100);
        }
        
        if (formData.productName) {
          document.getElementById('productName').value = formData.productName;
        }
        
        if (formData.keywords) {
          document.getElementById('productKeywords').value = formData.keywords;
        }
        
        if (formData.brand) {
          document.getElementById('productBrand').value = formData.brand;
        }
        
        if (formData.origin) {
          document.getElementById('productOrigin').value = formData.origin;
        }
        
        if (formData.description) {
          document.getElementById('productDescription').innerHTML = formData.description;
        }
      }
      
      // 恢复步骤2数据
      function restoreStep2Data() {
        // 已在分类选择时加载参数
        
        // 恢复参数值
        if (formData.parameters && formData.parameters.length) {
          const params = document.querySelectorAll('#paramsTableBody tr');
          
          params.forEach((row, index) => {
            if (formData.parameters[index]) {
              row.querySelector('.param-value').value = formData.parameters[index].value || '';
            }
          });
        }
        
        // 恢复规格
        if (formData.specifications && formData.specifications.length) {
          // 先清除现有规格（保留一个）
          const existingSpecs = document.querySelectorAll('#specsTableBody tr');
          for (let i = 1; i < existingSpecs.length; i++) {
            existingSpecs[i].remove();
          }
          
          // 填充数据
          formData.specifications.forEach((spec, index) => {
            if (index === 0) {
              // 使用第一个现有行
              document.querySelector('.spec-name').value = spec.name;
              document.querySelector('.spec-value').value = spec.value;
            } else {
              // 添加新行
              addSpecificationRow(spec.name, spec.value);
            }
          });
          
          // 更新删除按钮状态
          updateSpecDeleteButtons();
        }
      }
      
      // 恢复步骤3数据
      function restoreStep3Data() {
        if (formData.basePrice) {
          document.getElementById('basePrice').value = formData.basePrice;
        }
        
        if (formData.priceUnit) {
          document.getElementById('priceUnit').value = formData.priceUnit;
          
          // 显示自定义单位输入框
          if (formData.priceUnit === 'custom') {
            document.getElementById('customUnitContainer').classList.remove('hidden');
            
            if (formData.customUnit) {
              document.getElementById('customUnitContainer').querySelector('input').value = formData.customUnit;
            }
          }
        }
        
        if (formData.minOrder) {
          document.getElementById('minOrder').value = formData.minOrder;
        }
        
        if (formData.stockQuantity) {
          document.getElementById('stockQuantity').value = formData.stockQuantity;
        }
        
        // 恢复价格阶梯
        if (formData.priceTiers && formData.priceTiers.length) {
          // 先清除现有阶梯（保留一个）
          const existingTiers = document.querySelectorAll('.price-tier-row');
          for (let i = 1; i < existingTiers.length; i++) {
            existingTiers[i].remove();
          }
          
          // 填充数据
          formData.priceTiers.forEach((tier, index) => {
            if (index === 0) {
              // 使用第一个现有行
              document.querySelector('.tier-start').value = tier.start;
              document.querySelector('.tier-end').value = tier.end;
              document.querySelector('.tier-price').value = tier.price;
            } else {
              // 添加新行
              addPriceTierRow(tier.start, tier.end, tier.price);
            }
          });
          
          // 更新删除按钮状态
          updateTierDeleteButtons();
        }
        
        if (formData.deliveryTime) {
          document.getElementById('deliveryTime').value = formData.deliveryTime;
        }
        
        if (formData.packaging) {
          document.getElementById('packaging').value = formData.packaging;
        }
        
        if (formData.transportMethod) {
          document.getElementById('transportMethod').value = formData.transportMethod;
        }
        
        if (formData.freightType) {
          document.getElementById('freightType').value = formData.freightType;
        }
      }
      
      // 更新预览数据
      function updatePreviewData() {
        // 基本信息预览
        document.getElementById('preview-category').textContent = 
          `${formData.category?.name || ''} / ${formData.subCategory?.name || ''}`;
          
        document.getElementById('preview-name').textContent = formData.productName || '-';
        document.getElementById('preview-brand').textContent = formData.brand || '-';
        document.getElementById('preview-origin').textContent = formData.origin || '-';
        document.getElementById('preview-keywords').textContent = formData.keywords || '-';
        
        // 规格参数预览
        const paramsContainer = document.getElementById('preview-params');
        paramsContainer.innerHTML = '';
        
        if (formData.parameters && formData.parameters.length) {
          const paramsList = document.createElement('dl');
          paramsList.className = 'grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2';
          
          formData.parameters.forEach(param => {
            if (param.value) {
              const dt = document.createElement('dt');
              dt.className = 'text-neutral-500';
              dt.textContent = param.name;
              
              const dd = document.createElement('dd');
              dd.className = 'font-medium';
              dd.textContent = param.value;
              
              const div = document.createElement('div');
              div.appendChild(dt);
              div.appendChild(dd);
              
              paramsList.appendChild(div);
            }
          });
          
          paramsContainer.appendChild(paramsList);
        } else {
          paramsContainer.innerHTML = '<p class="text-neutral-500 italic">未设置规格参数</p>';
        }
        
        // 价格与物流信息预览
        let priceText = '-';
        if (formData.basePrice && formData.priceUnit) {
          const unitText = formData.priceUnit === 'custom' ? formData.customUnit : 
                          formData.priceUnit === 'ton' ? '吨' :
                          formData.priceUnit === 'kg' ? '千克' :
                          formData.priceUnit === 'piece' ? '件' :
                          formData.priceUnit === 'set' ? '套' :
                          formData.priceUnit === 'meter' ? '米' :
                          formData.priceUnit === 'square' ? '平方米' : formData.priceUnit;
                          
          priceText = `${formData.basePrice} 元/${unitText}`;
        }
        
        document.getElementById('preview-price').textContent = priceText;
        
        const unitText = formData.priceUnit === 'custom' ? formData.customUnit : 
                        formData.priceUnit === 'ton' ? '吨' :
                        formData.priceUnit === 'kg' ? '千克' :
                        formData.priceUnit === 'piece' ? '件' :
                        formData.priceUnit === 'set' ? '套' :
                        formData.priceUnit === 'meter' ? '米' :
                        formData.priceUnit === 'square' ? '平方米' : formData.priceUnit;
        
        document.getElementById('preview-minorder').textContent = 
          formData.minOrder ? `${formData.minOrder} ${unitText}` : '-';
          
        document.getElementById('preview-delivery').textContent = formData.deliveryTime || '-';
        document.getElementById('preview-transport').textContent = formData.transportMethodText || '-';
        document.getElementById('preview-freight').textContent = formData.freightTypeText || '-';
      }
      
      // 初始化富文本编辑器
      function initRichTextEditor() {
        const editor = document.getElementById('productDescription');
        const charCount = document.getElementById('descCharCount');
        
        // 处理占位符
        editor.addEventListener('focus', function() {
          if (this.innerHTML.trim() === '') {
            this.innerHTML = '';
          }
        });
        
        // 字符计数
        editor.addEventListener('input', function() {
          const text = this.innerText;
          charCount.textContent = text.length;
          
          // 验证长度
          if (text.length < 200) {
            document.getElementById('productDescriptionError').classList.remove('hidden');
          } else {
            document.getElementById('productDescriptionError').classList.add('hidden');
            this.classList.remove('form-error');
          }
        });
      }
      
      // 格式化文本
      function formatText(command) {
        document.execCommand(command, false, null);
        document.getElementById('productDescription').focus();
      }
      
      // 插入链接
      function insertLink() {
        const url = prompt('请输入链接地址:');
        if (url) {
          document.execCommand('createLink', false, url);
        }
        document.getElementById('productDescription').focus();
      }
      
      // 初始化分类选择联动
      function initCategorySelection() {
        const productCategory = document.getElementById('productCategory');
        const productSubCategory = document.getElementById('productSubCategory');
        
        productCategory.addEventListener('change', function() {
          const selected = this.value;
          productSubCategory.innerHTML = '';
          
          // 清空参数表格
          document.getElementById('paramsTableBody').innerHTML = '';
          
          if (selected && categoryData[selected]) {
            // 添加子分类选项
            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.textContent = '请选择子分类';
            productSubCategory.appendChild(defaultOption);
            
            categoryData[selected].subcategories.forEach(sub => {
              const option = document.createElement('option');
              option.value = sub.toLowerCase().replace(/\s+/g, '-');
              option.textContent = sub;
              productSubCategory.appendChild(option);
            });
            
            // 加载参数模板
            loadParametersTemplate(selected);
          } else {
            const option = document.createElement('option');
            option.value = '';
            option.textContent = '请先选择主分类';
            productSubCategory.appendChild(option);
          }
        });
      }
      
      // 加载参数模板
      function loadParametersTemplate(categoryId) {
        const paramsContainer = document.getElementById('paramsTableBody');
        paramsContainer.innerHTML = '';
        
        if (categoryData[categoryId]?.parameters) {
          categoryData[categoryId].parameters.forEach(param => {
            const row = document.createElement('tr');
            row.innerHTML = `
              <td class="px-4 py-3 text-sm text-neutral-700 param-name">${param.name} ${param.required ? '<span class="text-danger">*</span>' : ''}</td>
              <td class="px-4 py-3">
                <input type="text" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus param-value" ${param.required ? 'data-required="true"' : ''} placeholder="请输入${param.name}">
              </td>
            `;
            paramsContainer.appendChild(row);
          });
        }
      }
      
      // 初始化图片上传功能
      function initImageUploads() {
        const mainImageUpload = document.getElementById('mainImageUpload');
        const mainImageInput = document.getElementById('mainImageInput');
        const mainImagePreview = document.getElementById('mainImagePreview');
        const removeMainImage = document.getElementById('removeMainImage');
        
        // 主图上传
        mainImageUpload.addEventListener('click', function() {
          mainImageInput.click();
        });
        
        mainImageInput.addEventListener('change', function(e) {
          handleImageUpload(e, mainImagePreview, mainImageUpload);
        });
        
        // 移除主图
        removeMainImage.addEventListener('click', function() {
          mainImageInput.value = '';
          mainImagePreview.classList.add('hidden');
          mainImageUpload.classList.remove('hidden');
          document.getElementById('mainImageError').classList.add('hidden');
        });
        
        // 附图上传
        for (let i = 1; i <= 4; i++) {
          const uploadArea = document.getElementById(`imageUpload${i}`);
          const input = document.getElementById(`imageInput${i}`);
          
          uploadArea.addEventListener('click', function() {
            input.click();
          });
          
          input.addEventListener('change', function(e) {
            handleImageUpload(e, uploadArea, null, true);
          });
        }
      }
      
      // 处理图片上传
      function handleImageUpload(event, previewElement, uploadElement, isSubImage = false) {
        if (event.target.files && event.target.files[0]) {
          const reader = new FileReader();
          
          reader.onload = function(e) {
            if (isSubImage) {
              // 处理附图
              previewElement.innerHTML = `
                <img src="${e.target.result}" alt="预览图" class="w-full h-full object-cover rounded">
                <button type="button" class="absolute top-1 right-1 w-6 h-6 bg-danger/80 text-white rounded-full flex items-center justify-center hover:bg-danger transition-colors remove-image">
                  <i class="fa fa-times text-xs"></i>
                </button>
              `;
              previewElement.classList.add('relative');
              
              // 添加移除功能
              previewElement.querySelector('.remove-image').addEventListener('click', function(e) {
                e.stopPropagation();
                event.target.value = '';
                previewElement.innerHTML = `
                  <i class="fa fa-cloud-upload text-2xl text-neutral-400 mb-1"></i>
                  <p class="text-xs text-neutral-500">点击上传</p>
                `;
                previewElement.classList.remove('relative');
              });
            } else {
              // 处理主图
              previewElement.querySelector('img').src = e.target.result;
              previewElement.classList.remove('hidden');
              if (uploadElement) {
                uploadElement.classList.add('hidden');
              }
              document.getElementById('mainImageError').classList.add('hidden');
            }
          }
          
          reader.readAsDataURL(event.target.files[0]);
        }
      }
      
      // 初始化规格参数功能
      function initSpecificationFeatures() {
        // 添加自定义参数
        document.getElementById('addCustomParam').addEventListener('click', function() {
          const paramName = prompt('请输入参数名称:');
          if (paramName && paramName.trim()) {
            const paramsContainer = document.getElementById('paramsTableBody');
            const row = document.createElement('tr');
            row.innerHTML = `
              <td class="px-4 py-3 text-sm text-neutral-700 param-name">${paramName.trim()} <span class="text-danger">*</span></td>
              <td class="px-4 py-3">
                <input type="text" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus param-value" data-required="true" placeholder="请输入${paramName.trim()}">
              </td>
            `;
            paramsContainer.appendChild(row);
          }
        });
        
        // 添加规格
        document.getElementById('addSpecification').addEventListener('click', function() {
          addSpecificationRow();
          updateSpecDeleteButtons();
        });
        
        // 初始化删除按钮事件委托
        document.getElementById('specsTableBody').addEventListener('click', function(e) {
          if (e.target.closest('.delete-spec')) {
            const row = e.target.closest('.spec-row');
            row.remove();
            updateSpecDeleteButtons();
          }
        });
      }
      
      // 添加规格行
      function addSpecificationRow(name = '', value = '') {
        const specsContainer = document.getElementById('specsTableBody');
        const row = document.createElement('tr');
        row.className = 'spec-row';
        row.innerHTML = `
          <td class="px-4 py-3">
            <input type="text" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus spec-name" placeholder="如：直径" value="${name}">
          </td>
          <td class="px-4 py-3">
            <input type="text" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus spec-value" placeholder="如：12mm,16mm（用逗号分隔）" value="${value}">
          </td>
          <td class="px-4 py-3">
            <button type="button" class="text-danger hover:text-danger/80 transition-colors text-sm delete-spec">
              <i class="fa fa-trash-o"></i>
            </button>
          </td>
        `;
        specsContainer.appendChild(row);
      }
      
      // 更新规格删除按钮状态
      function updateSpecDeleteButtons() {
        const rows = document.querySelectorAll('.spec-row');
        const deleteButtons = document.querySelectorAll('.delete-spec');
        
        deleteButtons.forEach((btn, index) => {
          if (rows.length <= 1) {
            btn.disabled = true;
            btn.classList.add('opacity-50', 'cursor-not-allowed');
          } else {
            btn.disabled = false;
            btn.classList.remove('opacity-50', 'cursor-not-allowed');
          }
        });
      }
      
      // 初始化价格阶梯功能
      function initPriceTierFeatures() {
        // 添加价格阶梯
        document.getElementById('addPriceTier').addEventListener('click', function() {
          addPriceTierRow();
          updateTierDeleteButtons();
        });
        
        // 初始化删除按钮事件委托
        document.getElementById('priceTiersContainer').addEventListener('click', function(e) {
          if (e.target.closest('.delete-tier')) {
            const row = e.target.closest('.price-tier-row');
            row.remove();
            updateTierDeleteButtons();
          }
        });
      }
      
      // 添加价格阶梯行
      function addPriceTierRow(start = '', end = '', price = '') {
        const container = document.getElementById('priceTiersContainer');
        const row = document.createElement('tr');
        row.className = 'price-tier-row';
        row.innerHTML = `
          <td class="px-4 py-3">
            <div class="flex items-center space-x-2">
              <input type="number" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus tier-start" placeholder="起始数量" min="1" value="${start}">
              <span class="text-neutral-500">-</span>
              <input type="number" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus tier-end" placeholder="结束数量" min="1" value="${end}">
              <span class="text-neutral-500 ml-1">单位</span>
            </div>
            <p class="error-message tier-range-error hidden">请输入有效的数量范围</p>
          </td>
          <td class="px-4 py-3">
            <input type="number" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus tier-price" placeholder="单价" step="0.01" min="0" value="${price}">
            <p class="error-message tier-price-error hidden">请输入单价</p>
          </td>
          <td class="px-4 py-3">
            <button type="button" class="text-danger hover:text-danger/80 transition-colors text-sm delete-tier">
              <i class="fa fa-trash-o"></i>
            </button>
          </td>
        `;
        container.appendChild(row);
      }
      
      // 更新阶梯删除按钮状态
      function updateTierDeleteButtons() {
        const rows = document.querySelectorAll('.price-tier-row');
        const deleteButtons = document.querySelectorAll('.delete-tier');
        
        deleteButtons.forEach((btn, index) => {
          if (rows.length <= 1) {
            btn.disabled = true;
            btn.classList.add('opacity-50', 'cursor-not-allowed');
          } else {
            btn.disabled = false;
            btn.classList.remove('opacity-50', 'cursor-not-allowed');
          }
        });
      }
      
      // 初始化单位选择功能
      function initUnitSelection() {
        const priceUnit = document.getElementById('priceUnit');
        const customUnitContainer = document.getElementById('customUnitContainer');
        
        priceUnit.addEventListener('change', function() {
          if (this.value === 'custom') {
            customUnitContainer.classList.remove('hidden');
          } else {
            customUnitContainer.classList.add('hidden');
          }
        });
      }
      
      // 初始化提交功能
      function initSubmissionFeatures() {
        // 同意条款复选框
        document.getElementById('agreeTerms').addEventListener('change', function() {
          if (this.checked) {
            document.getElementById('agreeTermsError').classList.add('hidden');
          }
        });
      }
      
      // 重置表单
      function resetForm() {
        document.getElementById('productForm').reset();
        currentStep = 1;
        updateStepUI();
        
        // 重置图片上传区域
        document.getElementById('mainImagePreview').classList.add('hidden');
        document.getElementById('mainImageUpload').classList.remove('hidden');
        
        for (let i = 1; i <= 4; i++) {
          const uploadArea = document.getElementById(`imageUpload${i}`);
          uploadArea.innerHTML = `
            <i class="fa fa-cloud-upload text-2xl text-neutral-400 mb-1"></i>
            <p class="text-xs text-neutral-500">点击上传</p>
          `;
          uploadArea.classList.remove('relative');
        }
        
        // 清空富文本编辑器
        document.getElementById('productDescription').innerHTML = '';
        
        // 清空参数表格
        document.getElementById('paramsTableBody').innerHTML = '';
        
        // 重置规格表格
        const specsContainer = document.getElementById('specsTableBody');
        specsContainer.innerHTML = `
          <tr class="spec-row">
            <td class="px-4 py-3">
              <input type="text" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus spec-name" placeholder="如：直径">
            </td>
            <td class="px-4 py-3">
              <input type="text" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus spec-value" placeholder="如：12mm,16mm（用逗号分隔）">
            </td>
            <td class="px-4 py-3">
              <button type="button" class="text-danger hover:text-danger/80 transition-colors text-sm delete-spec" disabled>
                <i class="fa fa-trash-o"></i>
              </button>
            </td>
          </tr>
        `;
        
        // 重置价格阶梯表格
        const priceContainer = document.getElementById('priceTiersContainer');
        priceContainer.innerHTML = `
          <tr class="price-tier-row">
            <td class="px-4 py-3">
              <div class="flex items-center space-x-2">
                <input type="number" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus tier-start" placeholder="起始数量" min="1">
                <span class="text-neutral-500">-</span>
                <input type="number" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus tier-end" placeholder="结束数量" min="1">
                <span class="text-neutral-500 ml-1">单位</span>
              </div>
              <p class="error-message tier-range-error hidden">请输入有效的数量范围</p>
            </td>
            <td class="px-4 py-3">
              <input type="number" class="w-full rounded-md border border-neutral-300 py-1.5 px-3 text-sm form-input-focus tier-price" placeholder="单价" step="0.01" min="0">
              <p class="error-message tier-price-error hidden">请输入单价</p>
            </td>
            <td class="px-4 py-3">
              <button type="button" class="text-danger hover:text-danger/80 transition-colors text-sm delete-tier" disabled>
                <i class="fa fa-trash-o"></i>
              </button>
            </td>
          </tr>
        `;
        
        // 清空表单数据存储
        for (const key in formData) {
          delete formData[key];
        }
        
        // 隐藏自定义单位输入框
        document.getElementById('customUnitContainer').classList.add('hidden');
      }
    });
  </script>
</body>
</html>